<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="/css/style.css"/>
</head>
<body>
    <%- include("./include/top.ejs") %>
    <main>
        <div class="banner">
            <img src="/images/1.jpg">
            <span>勇攀高峰 砥砺前行</span>
        </div>
        <div class="container">
            <aside>
                <h2>产品服务</h2>
                <ul>
                    <li><a href="/product?cat_id=1">汽车配件</a></li>
                    <li><a href="/product?cat_id=2">轮船配件</a></li>
                    <li><a href="/product?cat_id=3">数码产品</a></li>
                    <li><a href="/product?cat_id=4">家居用品</a></li>
                </ul>
            </aside>
            <article class="main">
                <h2>用户注册</h2>
                <div class="form-container">
                    <form id="registerForm" action="/register" method="POST">
                        <div class="form-group">
                            <label for="username">用户名：</label>
                            <input type="text" id="username" name="username" required 
                                   pattern="[a-zA-Z0-9]{4,20}" 
                                   title="4-20位字母或数字">
                        </div>
                        
                        <div class="form-group">
                            <label for="password">密码：</label>
                            <input type="password" id="password" name="password" required
                                   pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                                   title="至少8位，包含大小写字母和数字">
                        </div>
                        <div class="form-group">
                            <label for="realname">真实姓名：</label>
                            <input type="text" id="realname" name="realname" required>
                        </div>
                         <div class="form-group">
                            <label>性别：</label>
                            <div class="radio-group">
                                <label><input type="radio" name="gender" value="male" checked> 男</label>
                                <label><input type="radio" name="gender" value="female"> 女</label>
                             
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="email">邮箱：</label>
                            <input type="email" id="email" name="email" required>
                        </div>

                        <div class="form-group">
                            <label for="phone">手机号：</label>
                            <input type="tel" id="phone" name="phone" required
                                   pattern="^1[3-9]\d{9}$"
                                   title="11位有效手机号">
                        </div>
                    <div class="form-group">
                            <label for="address">联系地址：</label>
                            <textarea id="address" name="address" rows="4" required cols="110" placeholder="请输入详细联系地址"></textarea>
                        </div>

                        <div class="form-group">
                            <input type="submit" value="立即注册">
                            <a href="/login" style="margin-left:20px;"></a>
                        </div>
                    </form>
                </div>
            </article>
        </div>
    </main>
    <%- include("./include/bottom.ejs") %>
    <style>
        .form-container {
            max-width: 850px;
            margin: 20px auto;
            padding: 30px;
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }
        .form-group {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }
        .form-group label {
            width: 120px;
            text-align: right;
            margin-right: 15px;
        }
        .form-group input {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .form-group input[type="submit"] {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 25px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .form-group input[type="submit"]:hover {
            background: #0056b3;
        }
    </style>
</body>
</html>